DAY5 速談flex gride布局、定位、響應式

2021 iThome 鐵人賽

DAY 5

Modern Web

前端幼鳥三十天養成記系列第 5 篇

13th鐵人賽 flexbox grid layout 響應式網頁設計定位

ChihBird稚鳥

2021-09-10 17:00:55

1319 瀏覽

分享至

為了加快進度，我要快速帶過flex、gride布局、定位和響應式，幫你繫個安全戴，要飆車囉~~

flex : 學習方法→邊玩蛙蛙回家，邊看連結2的說明

遊戲這邊請 /Flexbox Froggy
Flexbox完整介紹 /A Complete Guide to Flexbox
24關小筆記：flex-direction: row時，主軸是橫的；column時，主軸是直的。

grid :切成網格學習方法：純玩遊戲

灌溉你的田遊戲這邊請/Grid Garden - A game for learning CSS grid

定位

布局 VS 定位

布局：大的區塊與區塊之間的關係。
定位：設定單一元素的位置。可以想像成拿個釘子，在畫布上愛釘哪釘哪。

position: relative VS position: absolute ：

relative 根據自身定位
absolute 根據最近一層的定位元素定位

定位元素：

position: absolute, relative, fixed
<body>

實現水平對齊、垂直對齊的三種方法：

inline element：對父元素設 text-align
block element：
- margin自動分配 margin：auto
- top:50% ; margin-top: ;
  left:50% ; margin-left: ; 幼鳥們，覺得要填多少呢? 試試看
- transform:translate(-50%,-50%);

小筆記：子元素position:absolute後父元素可能塌陷

條件：當

父元素沒設高度
子元素設定position:absolute
父元素不是子元素的定位元素

則，子元素脫離父元素的控制 →父元素塌陷。

響應式

rem 相對長度單位，相對於根元素<html>

@media only screen and (min-width:360px)  and (max-width:412px){
	html{/*Glaxy S7*/
		font-size:100px;
	}
}@media only screen and (min-width:413px){
	html{/*Galaxy Note 10*/
		font-size:115px;
	}
}
p{
 font-size: 0.15rem;   
}

小提醒：and 後面要空格，要不然你會和我一樣卡了1hr，還不知道為啥~~
@media screen and 不起作用原因彙總。（轉載）
手機尺寸參考模擬手機上網站的樣子 Responsive Testing On Real Devices & Browsers

vw=1/100width;vh:1/100height

vw,vh 和 rem的差別

vw vh會精準依照寬高尺寸，縮放元素。
rem的方法是一個一個級距，當到下一個級距，元素才會有尺寸調整。

p{
	/* width:x px */ 
	font-size: 15vw; 
	/* font-size= (x*15/100)px */  
}

小備註：font-size 設定12px以下，會顯示12px

時間：9/10 04:53PM
音樂：紅玫瑰張碧晨
飲料：冰咖啡
地點：圓桌窗戶旁
狀態：這是從Notion貼到IT邦幫忙的時間，不是寫文章的
參考的影片在YOUTUBE被下架，覺得慌...

DAY4 雙飛翼布局 - 三個欄的C位爭奪戰(下)

DAY6 JS跑在瀏覽器上的怪問題們

系列文

前端幼鳥三十天養成記共 30 篇

RSS系列文訂閱系列文

6 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22206 篇

完賽人數

600 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

前端幼鳥三十天養成記系列 第 5 篇